body
  background: #f9f9f9
.contain
  width: 750px
  margin: 0 auto
  overflow: hidden
  .header-fixed
    height: 72px
    display: flex
    justify-content: space-between
    line-height: 72px
    position: fixed
    width: 100%
    left: 0
    top: 0
    background: #ffffff 
    z-index 11
    padding: 0 20px
    box-sizing: border-box
    align-items: center
    .title
      font-size: 34px
      color:#000000
    .search
      height: 38px
  .main
    padding-top: 70px
    padding-bottom: 90px
    .recom-hot
      padding: 0 60px
      margin-top: 25px
      .title
        font-size: 40px
        line-height: 40px
        margin-bottom: 22px
      .tit
        font-size: 22px
        line-break: 22px
        color: #7e7e7e
        margin-bottom: 22px
    .recon-swiper
      width: 100%
      img
        width: 100%
        height: 100%
    .list
      padding: 0 32px
      .li
        width: 324px
        height: 496px
        background: #ffffff
        float: left
        position: relative
        margin-bottom: 17px
        border: 1px solid #f5f5f5
        box-sizing: border-box
        .img
          height: 326px
          width: 250px
          margin: 0 auto
        .info
          padding: 0 23px
          .en-tit
            color: #808080
            font-size: 20px
            line-height: 20px
            margin-bottom: 15px
          .til
            color: #000000
            font-size: 22px
            width: 100%
            text-overflow: ellipsis
            line-height: 22px
            white-space:nowrap
            overflow hidden
            margin-bottom: 30px
          .price
              color: #f87218
          .cart-ico
            position: absolute
            right: 24px
            bottom: 24px
        &:nth-child(odd)
          margin-right: 35px
  /*个人中心*/
  .top-bg
    position: relative
    text-align: center
    .set
      position: absolute;
      left: 20px
      top: 20px
      width: 40px
      height: 40px
      img 
        width: 100%
        height: 100%
    .per-pro
      margin-bottom: 30px
      img
        width: 140px
        height: 140px
        border-radius: 50%
        margin-top: 87px
    .name
      color: #5b5b5b
      font-size: 24px
      line-height: 24px
      margin-bottom: 25px
    .info
      color: #9c9c9c
      font-size: 22px
      margin-bottom: 30px
  .order-self
    display: flex
    height: 70px
    line-height: 70px
    padding: 0 25px
    background: url('../image/l-icon.png') no-repeat center right 40px
    background-size: 13px 25px
    justify-content: space-between
    box-sizing: border-box
    border-bottom: 1px solid #e3e3e3
    border-top: 1px solid #e3e3e3
    background-color: #ffffff
    margin-top: 50px
    .order-rt
      margin-right: 40px
  .order-type
    display: flex
    padding: 0 70px
    justify-content: space-between
    background: #ffffff
    height: 140px
    border-bottom: 1px solid #e3e3e3
    align-items: center
    .li
      text-align: center
      color: #797979
      font-size: 22px
  .other-type
    background: #ffffff
    padding: 0 40px
    padding-top: 45px
    padding-bottom: 30px
    .div
      width: 222px
      height: 210px
      float: left
      text-align: center
      box-sizing: border-box
      .con
        height: 70px
        display: flex
        align-items: center
        justify-content:center
        padding-top: 20px
      p
        margin-top: 50px
      &:nth-child(1)
        border-bottom: 2px solid #dcdcdc
        border-right: 2px solid #dcdcdc
      &:nth-child(2)
        border-bottom: 2px solid #dcdcdc
        border-right: 2px solid #dcdcdc
      &:nth-child(3)
        border-bottom: 2px solid #dcdcdc
      &:nth-child(4)
        border-right: 2px solid #dcdcdc
      &:nth-child(5)
        border-right: 2px solid #dcdcdc
  /*会员*/
  .per-vip
    .head
      background: url('../image/bg-vip.png') no-repeat center
      background-size: contain
      width: 553px
      height: 349px
      margin: 0 auto
      position: relative
      display: flex
      justify-content: center
      margin-top: 45px
      .portr
        width: 150px
        height: 150px
        border-radius: 50%
        overflow: hidden
        margin: 0 auto
        margin-top: 30px
      p 
        color: #ffffff
        font-size: 26px
        text-align: center
      .per-in
        width: 440px
        height: 50px
        margin-top: 30px
        .per-num
          width: 55px
          height: 38px
          background: url('../image/mor.png')  no-repeat center 
          background-size: contain
          text-align: center
          line-height: 30px
          color: #ffffff
          margin-left: 10px
          margin-bottom: 5px
        .per-con
          display: flex
          line-height: 16px
          .start,.end
            color: #ffffff
            font-size: 20px
          .start
            margin-right: 22px
          .end
            margin-left: 22px
          .percen
            width: 324px
            height: 16px
            background: url('../image/per-icon.png') no-repeat center 
            background-size: contain
            position: relative
            .per-bg
              position: absolute
              width: 50%
              height: 100%
              left: 0;
              background: #09e341
              border-radius: 10px
        
    .current
      width: 553px
      margin: 0 auto
      padding-left:20px
      box-sizing: border-box
      .level
        display: flex
        p:nth-child(1)
          font-size:24px
          line-height: 24px
          margin-bottom: 20px
        p:nth-child(2)
          background: url('../image/vip-icon.png') no-repeat center
          width: 29px
          height: 27px
          background-size: contain
          position: relative
          margin-left: 10pxs
          span 
            position: absolute
            right: 1px
            bottom: -2px
            font-size: 18px
            line-height: 18px
      .level-in
        background: url('../image/l-icon.png')  no-repeat center right
        margin-bottom: 28px
        color: #6f6f6f
        font-size: 22px
  .data-card  
    background: #ffffff
    .title
      box-sizing: border-box
      height: 72px
      background: url(../image/data-icon.png) no-repeat left 60px center
      line-height: 72px
      padding-left: 100px
    .data-integra
      display: flex
      font-size: 22px
      height: 66px
      box-sizing: border-box
      border-top: 1px solid #e3e3e3
      line-height: 66px
      .li
        flex: 1
        border-right: 1px solid #e3e3e3
        text-align: center
        &:nth-child(3)
          border-right: none
      &:nth-child(2)
        background: #fbfbfb
      &:nth-child(3)
        border-bottom: 1px solid #e3e3e3
  .val-person
    background: #fbfbfb
    padding: 0 60px
    .title
      box-sizing: border-box
      height: 72px
      background: url(../image/spell-icon.png) no-repeat left  center
      background-size: 36px 28px
      line-height: 72px
      padding-left:75px
      font-size: 26px
    .val-list
      display: flex
      position: relative
      margin-top: 25px
      .more-icon 
        width: 20px
        height: 28px
        position: absolute
        right: -10px
        top: 30px
        background: url('../image/l-icon.png')  no-repeat center
      .li
        flex: 1
        position: relative
        .img
          width:85px
          height: 85px
          border-radius: 50%
          overflow hidden 
          margin-bottom: 10px
  /*专辑*/
  .show-list
    .li
      img 
        width: 100%
        height: 308px
      .info
        text-align: center
        .pl
          color: #000000
          font-size: 22px
          line-height: 22px
          margin-bottom: 18px
          margin-top: 20px
        .title 
          color: #949494
          font-size: 22px
          line-height: 22px
          margin-bottom: 20px
  /*拼团*/
  .spell-list
    .li
      margin-bottom: 20px
    .info
      display: flex
      margin-top: 15px
      justify-content: space-between
      padding: 0 20px
      .title
        width: 500px
        p:nth-child(1)
          font-size: 22px
          color: #000000
          line-height: 22px
          margin-bottom: 15px
        .price
          font-size: 28px
          color: #f26723
          margin-right: 10px
        .num
          color: #949494
          font-size: 20px
      .btn
        .spell-btn
          width: 152px
          height: 60px
          background: #f26723
          border-radius: 15px
          text-align: center
          line-height: 60px
          color: #ffffff
          font-size: 24px
  /*详情*/
  .ass-main
    margin-top: 70px
    padding-bottom: 80px
    .assoc
      .title
        text-align: center
        height: 25px
        padding-top: 20px
        padding-bottom: 20px
        .con
          width: 146px
          position: relative
          text-align: center
          height: 100%
          margin: 0 auto
          .line
            width: 146px
            height: 1px 
            background: #5b5b5b
            display: inline-block
            position: absolute
            top: 10px
            left: 0
          .na
            font-size: 24px
            line-height: 24px
            color: #5b5b5b
            position: absolute
            top: 0
            left: 0
            z-index 1212
            background: #f9f9f9
            padding: 0 5px
            margin-left: 20px
    .as-info
      display: flex
      padding: 25px 20px
      border-bottom: 1px solid #e0e0e0
      .info
        width: 500px
        .title
          font-size: 28px
          color: #424242
          line-height: 28px
          margin-bottom: 20px
        .des
          font-size: 22px
          color: #626262
          line-height: 22px
      .pri
        color: #fa9f73
        font-size: 36px
        margin-left: 20px
    .assoc-list
      display: flex
      .li
        width: 242px
        border: 1px solid #e8e7e9
        margin: 0 4px
        .img
          width: 241px
          height: 234px
          img
            width: 100%
            height: 100%
        .info
          text-align: center
          margin-top: 10px
          p
            line-height: 20px
            &:nth-child(1)
              color: #a0a0a0
              font-size: 20px
              margin-bottom: 10px
            &:nth-child(2)
              color: #585858
              font-size: 20px
              margin-bottom: 10px
            &:nth-child(3)
              color: #f98537
              font-size: 20px
              padding-bottom: 30px
    .ass-price
      div
        float: left
        &.package
          width: 187px
          height: 187px
        &.price-num
          width: 188px
          text-align: center
          p
            font-size: 20px
            span 
              color: #f95523
            &:nth-child(1)
              margin-top: 70px
              margin-bottom: 12px
            &:nth-child(2)
              color: #f95523
  .bottom-cart
    width: 100%
    height: 86px
    line-height: 86px
    display: flex
    position: fixed
    bottom: 0
    left: 0
    font-size: 24px
    z-index: 123123
    .custo
      width: 16%
      height: 100%
      background: url('../image/cus1-icon.png') no-repeat center
      border-right: 1px solid #e5e5e5
      background-color: #ffffff
    .bac
      width: 16%
      height: 100%
      background: url('../image/cart-icon.png') no-repeat center  
      background-color: #ffffff 
    .addcart
      width: 33%
      text-align: center
      background: #f2f2f2
      color:#252525
    .buy
      width: 35%
      text-align: center
      background: #333333
      color: #ffffff
  
          





            




